<template>
  <el-breadcrumb separator="/" style="margin: 20px 20px 0">
    <el-breadcrumb-item>{{ firstTitle }}</el-breadcrumb-item>
    <el-breadcrumb-item v-if="lastTitle">{{ lastTitle }}</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
import { menuList } from "./Menu.vue";

export default {
  data() {
    return {
      firstTitle: "",
      lastTitle: "",
    };
  },
  created() {
    this.getTitle();
  },
  watch: {
    $route(to, from) {
      this.getTitle(to);
    },
  },
  methods: {
    getTitle(to) {
      const route = to || this.$route;
      menuList.forEach((item) => {
        if (item.index === route.path) {
          this.firstTitle = item.title;
          this.lastTitle = "";
        } else {
          item.children &&
            item.children.forEach((val) => {
              if (val.index === route.path) {
                this.firstTitle = item.title;
                this.lastTitle = val.title;
              }
            });
        }
      });
    },
  },
};
</script>
